import React from "react";
import { add } from "../../redux/reducer/person";
import { connect } from "react-redux";

function PersonUI(props) {
  const nameRef = React.createRef();
  const ageRef = React.createRef();

  const add = () => {
    const name = nameRef.current.value;
    const age = ageRef.current.value;
    props.add({ name, age });
  };

  return (
    <div>
      <div>
        <input ref={nameRef} type="text" placeholder="输入人名" />
        <input ref={ageRef} type="text" placeholder="输入年龄" />
        <button onClick={add}>添加一个人</button>
      </div>
      <ul style={{listStyle:"none"}}>
        {props.person.value.map(e=><li key={e.id}>{e.name}--{e.age}</li>)}
      </ul>
      <div>
        计数结果: {props.counter.value}
      </div>
    </div>
  );
}

export default connect(
  (state) => ({person:state.person, counter:state.counter}),
  { add }
)(PersonUI);
